<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="css/style.css" rel="stylesheet" type="text/css">
</head>

<body>
<div style="display: none">
    <input id="gt" type="text" th:value="${gt}">
    <input id="challenge" type="text" th:value="${challenge}">
    <input id="key" type="text" th:value="${key}">
</div>



<div>
    <label>验证：</label>
    <div id="captcha">
        <div id="text">
            点击验证
        </div>
        <div id="wait" class="show">
            <div class="loading">
                <div class="loading-dot"></div>
                <div class="loading-dot"></div>
                <div class="loading-dot"></div>
                <div class="loading-dot"></div>
            </div>
        </div>
    </div>
</div>
<br>

<div id="btn-result" class="btn">5. 结果</div>
<br><br>

<div>
    <label for="validate">validate: </label>
    <input class="inp" id="validate" type="text" readonly="readonly">
</div>
<br>

<div>
    <label for="seccode">seccode: </label>
    <input class="inp" id="seccode" type="text" readonly="readonly">
</div>
<br>


<script src="js/jquery.js"></script>
<script src="js/gt.js"></script>

<script>
    var handler = function (captchaObj) {
        captchaObj.appendTo('#captcha');
        captchaObj.onReady(function () {
            $("#wait").hide();
        });
        $('#btn-result').click(function () {
            var result = captchaObj.getValidate();
            if (!result) {
                return alert('请完成验证');
            }
            var validate = $('#validate')[0];
            var seccode = $('#seccode')[0];
            validate.value = result.geetest_validate;
            seccode.value = result.geetest_seccode;
        });
        // 更多前端接口说明请参见：http://docs.geetest.com/install/client/web-front/
    };

    $('#btn-gen').click(function () {
        $('#text').hide();
        $('#wait').show();
        var gt = $('#gt')[0].value;
        var challenge = $('#challenge')[0].value;
        // 调用 initGeetest 进行初始化
        // 参数1：配置参数
        // 参数2：回调，回调的第一个参数验证码对象，之后可以使用它调用相应的接口
        initGeetest({
            // 以下 4 个配置参数为必须，不能缺少
            gt: gt,
            challenge: challenge,
            offline: false, // 表示用户后台检测极验服务器是否宕机
            new_captcha: true, // 用于宕机时表示是新验证码的宕机

            product: "popup", // 产品形式，包括：float，popup
            width: "300px",
            https: true

            // 更多前端配置参数说明请参见：http://docs.geetest.com/install/client/web-front/
        }, handler);
    });
</script>
</body>

</html>